<style>
    .item{
        border: 1px solid #fff;
        background-color: #ddd;
        margin: 20px;
        padding: 10px;
    }
    .item.discount{
        background-color: rgb(255, 213, 134);
    }
    .out {
        background-color: #fff;
        border: 1px solid #888;
        width: 99%;
        color: #444;
        font-size: 15px;
    }
</style>
<div class='title'>一个简单的仓储管理的示例</div>
<div class='sub'>
    <div class='text indent'>在这一节我们为您准备了一个简单的仓储管理的示例程序，我们希望您在阅读我们详细的教程之前，能够通过我们这个简单的示例来对Jet有一个大致的了解。以下是效果，代码请往下翻：</div>
    <div class='out'>
        <div class='item'>
            总库存：<span j="sum"></span>
        </div>
        <div j='goods'>
            <div class='item' jif='{{$.discount}}!=undefined:class[discount]'>
                <div j='$index'>'商品'+($+1)</div>
                <div>商品名称：
                    <span j='name'></span>
                </div>
                <div>原价：
                    <input class='j-input xs' type='number' j='price'/>
                </div>
                <div jshow='{{$.discount}}!=undefined'>
                    折扣：<span j='discount'></span>
                </div>
                <span>
                    售价：
                    <span j='price'>
                        $*(opt.parData.discount||1)
                    </span>
                </span>    
                <div>库存：
                    <input class='j-input xs' type='number' j='num'/>
                    <button class='j-btn xs' icon='plus' jon='add'></button>
                    <button class='j-btn xs' icon="minus" jon='reduce'></button>
                </div>
            </div>
        </div>
    </div>
    <div class='text indent'>以下是代码：</div>
    <div class="j-code" disabled width='99%' height='auto'>
&lt;style>
    .item{
        border: 1px solid #fff;
        background-color: #ddd;
        margin: 20px;
        padding: 10px;
    }
    .item.discount{
        background-color: rgb(255, 213, 134);
    }
&lt;/style>
&lt;div class='item'>
    总库存：&lt;span j="sum">&lt;/span>
&lt;/div>
&lt;div j='goods'>
    &lt;div class='item' jif='{{$.discount}}!=undefined:class[discount]'>
        &lt;div j='$index'>$+1&lt;/div>
        &lt;div>商品名称：
            &lt;span j='name'>&lt;/span>
        &lt;/div>
        &lt;div>原价：
            &lt;input class='j-input xs' type='number' j='price'/>
        &lt;/div>
        &lt;div jshow='{{$.discount}}!=undefined'>
            折扣：&lt;span j='discount'>&lt;/span>
        &lt;/div>
        &lt;span>
            售价：
            &lt;span j='price'>
                $*(opt.parData.discount||1)
            &lt;/span>
        &lt;/span>    
        &lt;div>库存：
            &lt;input class='j-input xs' type='number' j='num'/>
            &lt;button class='j-btn xs' icon='plus' jon='add'>&lt;/button>
            &lt;button class='j-btn xs' icon="minus" jon='reduce'>&lt;/button>
        &lt;/div>
    &lt;/div>
&lt;/div>
&lt;script>
    JET({
        data: {
            goods: [
                {
                    name: 'T恤',
                    num: 100,
                    price: 100.00,
                    discount:0.9
                },
                {
                    name: '牛仔裤',
                    num: 200,
                    price: 200.00
                },
                {
                    name: '羽绒服',
                    num: 80,
                    price: 1000.00
                }
            ],
            sum: 0,
        },
        onmounted: function () {
            this.countSum();
        },
        func: {
            add: function (d) {
                d.data.num++;
            },
            reduce: function (d) {
                d.data.num--;
            },
            countSum: function () {
                var s = 0;
                this.goods.forEach(function (ele) {
                    s += ele.num;
                });
                this.sum = s;
            },
        },
        ondatachange: {
            goods: {
                $each: {
                    num: function (d) {
                        if(d.value===''||d.value<0){
                            d.set(0)
                            JUI.msg('库存必须大于等于0')
                        }else{
                            this.countSum();
                        }
                    },
                    price: function (d) {
                        if(d.value===''||d.value<0){
                            d.set(0)
                            JUI.msg('商品价格必须大于等于0')
                        }
                    }
                }
            }
        }
    })
&lt;/script>
    </div>
</div>
<script>
    JET({
        data: {
            goods: [
                {
                    name: 'T恤',
                    num: 100,
                    price: 100.00,
                    discount:0.9
                },
                {
                    name: '牛仔裤',
                    num: 200,
                    price: 200.00
                },
                {
                    name: '羽绒服',
                    num: 80,
                    price: 1000.00
                }
            ],
            sum: 0,
        },
        onmounted: function () {
            this.countSum();
        },
        func: {
            add: function (d) {
                d.data.num++;
            },
            reduce: function (d) {
                d.data.num--;
            },
            countSum: function () {
                var s = 0;
                this.goods.forEach(function (ele) {
                    s += ele.num;
                });
                this.sum = s;
            },
        },
        ondatachange: {
            goods: {
                $each: {
                    num: function (d) {
                        if(d.value===''||d.value<0){
                            d.set(0)
                            JUI.msg('库存必须大于等于0')
                        }else{
                            this.countSum();
                        }
                    },
                    price: function (d) {
                        if(d.value===''||d.value<0){
                            d.set(0)
                            JUI.msg('商品价格必须大于等于0')
                        }
                    }
                }
            }
        }
    })
</script>